<template>
  <view class="bg-grey">
    <yHeader
      style="background-color: #fff"
      :current="6"
      :screenWidth="screenWidth"
      @Tabs="handleTabs"
    ></yHeader>
    <view class="__inner">
      <view class="my-2 bg-white">
        <el-button type="success" @click="back()">返回上一页</el-button>
      </view>
      <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
        <uni-section title="申请人信息" type="line">
          <view class="example">
            <!-- 基础表单校验 -->

            <uni-forms-item label="申请人姓名" required name="name">
              <uni-easyinput
                v-model="valiFormData.name"
                placeholder="请输入申请人姓名"
              />
            </uni-forms-item>
            <uni-forms-item
              label="企业名称"
              required
              name="qiyemingcheng"
              label-width="100"
            >
              <uni-easyinput
                v-model="valiFormData.qiyemingcheng"
                placeholder="请输入企业名称"
              />
            </uni-forms-item>
            <uni-forms-item
              label="企业地址"
              required
              name="qiyedizhi"
              label-width="100"
            >
              <uni-easyinput
                v-model="valiFormData.qiyedizhi"
                placeholder="请输入企业地址"
              />
            </uni-forms-item>
            <uni-forms-item
              label="联系电话"
              required
              name="lianxidianhua"
              label-width="100"
            >
              <uni-easyinput
                v-model="valiFormData.lianxidianhua"
                placeholder="请输入联系电话"
              />
            </uni-forms-item>
            <uni-forms-item
              label="信用证明"
              required
              name="introduction"
              label-width="100"
            >
              <uni-easyinput
                type="textarea"
                v-model="valiFormData.introduction"
                placeholder="请输入信用证明"
              />
            </uni-forms-item>
          </view>
        </uni-section>

        <uni-section title="融资申请信息" type="line">
          <view class="example">
            <!-- 基础表单校验 -->
            <uni-forms-item
              label="木耳数量"
              required
              name="name3"
              label-width="100"
            >
              <uni-easyinput
                v-model="valiFormData.name3"
                placeholder="请输入木耳数量"
              />
            </uni-forms-item>
            <uni-forms-item
              label="木耳品质"
              required
              name="name"
              label-width="100"
            >
              <view class="flex align-center">
                <radio-group name="radio">
                  <label size="small">
                    <radio value="radio1" /><text class="mr-2">一级品</text>
                  </label>
                  <label>
                    <radio value="radio2" /><text class="mr-2">二级品</text>
                  </label>
                  <label>
                    <radio value="radio2" /><text class="mr-2">三级品</text>
                  </label>
                  <label>
                    <radio value="radio2" /><text class="mr-2">四级品</text>
                  </label>
                  <label>
                    <radio value="radio2" /><text class="mr-2">等外级</text>
                  </label>
                </radio-group>
              </view>
            </uni-forms-item>
            <uni-forms-item
              label="木耳单价"
              required
              name="name4"
              label-width="100"
            >
              <uni-easyinput
                v-model="valiFormData.name4"
                placeholder="请输入单价(元/千克)"
              />
            </uni-forms-item>
            <uni-forms-item
              label="融资金额"
              required
              name="name2"
              label-width="100"
            >
              <uni-easyinput
                v-model="valiFormData.name2"
                placeholder="请输入应收金额"
              />
            </uni-forms-item>

            <uni-forms-item
              label="融资期限"
              required
              name="shuliang"
              label-width="100"
            >
              <uni-easyinput
                v-model="valiFormData.shuliang"
                placeholder="请输入融资期限"
              />
            </uni-forms-item>
            <uni-forms-item
              label="还款方式"
              required
              name="danjia"
              label-width="100"
            >
              <uni-easyinput
                v-model="valiFormData.danjia"
                placeholder="请输入还款方式"
              />
            </uni-forms-item>
          </view>
        </uni-section>

        <uni-section title="备注" type="line">
          <view class="example">
            <!-- 基础表单校验 -->
            <uni-forms-item label="备注" name="introduction">
              <uni-easyinput
                type="textarea"
                v-model="valiFormData.introduction"
                placeholder="请输入..."
              />
            </uni-forms-item>
            <button type="primary" @click="submit('valiForm')">提交申请</button>
          </view>
        </uni-section>
      </uni-forms>
    </view>
    <yFooter :screenWidth="screenWidth"></yFooter>
  </view>
</template>
<script>
const app = getApp();
import yHeader from "@/components/yHeader.vue";
import yFooter from "@/components/yFooter.vue";
export default {
  components: {
    yHeader,
    yFooter,
  },
  data() {
    return {
      screenWidth: uni.getSystemInfoSync().windowWidth,
      ThemeColors: app.globalData.ThemeColors,
      // 校验表单数据
      valiFormData: {
        name: "",
        name2: "",
        name3: "",
        name4: "",
        qiyemingcheng: "",
        qiyedizhi: "",
        lianxidianhua: "",
        zhiyawupin: "",
        shuliang: "",
        danjia: "",
        cangku: "",
        zongjia: "",
        cangkudizhi: "",
      },
      // 校验规则
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        name2: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        name3: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        name4: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        qiyemingcheng: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        qiyedizhi: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        lianxidianhua: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        zhiyawupin: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        shuliang: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        danjia: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        cangku: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        zongjia: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        cangkudizhi: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
      },
    };
  },
  onLoad() {},
  methods: {
    submit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          console.log("success", res);
          uni.showToast({
            title: `提交成功`,
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1, // 返回的页面数，1 表示返回上一页，2 表示返回上两页，依此类推
            });
          }, 1000); // 设置延迟时间为 2000 毫秒（2秒）
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    back() {
      uni.navigateBack();
    },
  },
};
</script>
<style lang="scss">
.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}

.center {
  width: 1200px;
  margin: auto;
}

page {
  background-color: #faf8fb;
}
</style>